<template>
  <div>
    <!-- 排片计划页面 -->
    <b style="color: #409eff">{{ cinemaRoom.cinema_name }}</b>
    的
    <b style="color: #409eff"
      >{{ cinemaRoom.cinema_room_name }} ({{ cinemaRoom.cinema_room_type }})</b
    >
    的排片计划列表

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 显示表格 -->
    <el-table :data="plans">
      <el-table-column
        prop="title"
        label="电影名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="showingon_date"
        label="上映时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="showingon_time"
        label="场次"
        align="center"
      ></el-table-column>
      <el-table-column label="票价" align="center">
        <template slot-scope="scope"> ￥{{ scope.row.price }} </template>
      </el-table-column>
      <el-table-column label="是否发布" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <el-button
          size="small"
          circle
          icon="el-icon-delete"
          type="danger"
        ></el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import httpApi from '@/http'
export default {
  data() {
    return {
      roomId: this.$route.params.roomId,
      cinemaRoom: {}, // 存储当前选中的放映厅对象
      plans: [], // 保存排片计划列表
    }
  },

  methods: {
    /** 列出当前放映厅排片计划列表 */
    listPlans() {
      httpApi.ShowingonPlanApi.queryByRoomId({ room_id: this.roomId }).then(
        res => {
          console.log('加载当前放映厅的排片计划列表：', res)
          this.plans = res.data.data
        }
      )
    },

    /** 加载放映厅的基本信息 */
    loadRoomInfo() {
      let params = { id: this.roomId }
      httpApi.CinemaRoomApi.queryById(params).then(res => {
        console.log('查询放映厅的基本信息', res)
        this.cinemaRoom = res.data.data
      })
    },
  },

  mounted() {
    // 加载放映厅的基本信息
    this.loadRoomInfo()
    // 加载该放映厅下的排片计划列表
    this.listPlans()
  },
}
</script>

<style lang="scss" scoped></style>
